// 引入 自定义的hooks
import { useAppDispatch, useAppSelector } from "../hooks";

// 导入 action
import { todoDelByIdAction } from "../store/action/todo";

export default function Main() {
  // 1 js 以前直接通过 ts 会报错 不识别 state ！
  // const { list } = useSelector((state) => state.todo);
  const { list } = useAppSelector((state) => state.todo);

  //  useAppDispatch 先返回 才会返回 可以使用 函数 dispatch- 触发 reducer
  const dispatch = useAppDispatch();
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((v) => (
          <li
            onClick={() => dispatch(todoDelByIdAction(v.id))}
            key={v.id}
            className={v.isDone ? "completed" : ""}
          >
            <div className="view">
              <input className="toggle" checked={v.isDone} type="checkbox" />
              <label>{v.task}</label>
              <button className="destroy"></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
